"use client";

import { Spinner } from "@/components/spinner";
import { Input } from "@/components/ui/input";
import { api } from "@/convex/_generated/api";
import { Id } from "@/convex/_generated/dataModel";
import { useMutation, useQuery } from "convex/react";
import { Search, Trash, Undo } from "lucide-react";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { toast } from "sonner";
import { ConfirmModal } from "../../../components/modals/confirm-modal";

export const TrashBox = () => {
    const router = useRouter()
    const params = useParams()
    const documents = useQuery(api.documents.getTrash)
    const restore = useMutation(api.documents.restore)
    const remove = useMutation(api.documents.remove)

    const [search, setSearch] = useState("")
    const filterDocuments = documents?.filter(d => d.title.toLocaleLowerCase().includes(search.toLocaleLowerCase()))

    const onClick = (documentId: string) => {
        router.push(`/documents/${documentId}`)
    }
    /**
     * 恢复
     * @param event 
     * @param documentId 
     */

    const onRestore = (
        // event: React.MouseEvent<HTMLDivElement, MouseEvent>,
        documentId: Id<"documents">
    ) => {
        // event.stopPropagation()
        const promise = restore({ id: documentId })
        toast.promise(promise, {
            loading: "Restoring note...",
            success: "Note restored!",
            error: "Failed to restore note."
        })
    }
    /**
     * 删除
     * @param event 
     * @param documentId 
     */
    const onRemove = (
        // event: React.MouseEvent<HTMLDivElement, MouseEvent>,
        documentId: Id<"documents">
    ) => {
        // event.stopPropagation()
        const promise = remove({ id: documentId })
        toast.promise(promise, {
            loading: "Removing note...",
            success: "Note removed!",
            error: "Failed to remove note."
        })
        if (params.documentId === documentId) {
            router.push("/documents")
        }

    }
    if (documents === undefined) {
        return (
            <div className="h-full flex items-center justify-center p-4">
                <Spinner size={"lg"} />
            </div>
        )
    }

    return (<>
        <div className="text-sm">
            <div className="flex items-center gap-x-1 p-2">
                <Search className="h-4 w-4" />
                <Input
                    value={search}
                    onChange={e => setSearch(e.target.value)}
                    className="h-7 px-2 focus-visible:ring-transparent bg-secondary"
                    placeholder="Filter by page title..."
                />
            </div>
            <div className="mt-2 px-2 pb-1">
                <p className="hidden last:block text-xs text-center text-muted-foreground pb-2">
                    No documents found.
                </p>
                {
                    filterDocuments?.map(document => (
                        <div
                            className="text-sm rounded-sm w-full hover:bg-primary/5 flex items-center text-primary justify-between"
                            key={document._id}
                            role="button"
                            onClick={() => onClick(document._id)}>
                            <span className="truncate pl-2">{document.title}</span>
                            <div className="flex items-center">
                                <ConfirmModal onConfirm={() => onRestore(document._id)}>
                                    <div
                                        className="rounded-sm p-2 hover:bg-neutral-200 dark:hover:bg-neutral-200"
                                        role="button"
                                    >
                                        <Undo className="w-4 h-4 text-muted-foreground" />
                                    </div>
                                </ConfirmModal>

                                <ConfirmModal onConfirm={() => onRemove(document._id)}>
                                    <div
                                        className="rounded-sm p-2 dark:hover:bg-neutral-200 hover:bg-neutral-200"
                                        role="button"
                                    >
                                        <Trash className="w-4 h-4 text-muted-foreground" />
                                    </div>
                                </ConfirmModal>

                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    </>)
}